<template>
	<view class="app">
		<pageHeader ref="pageHeader"></pageHeader>
		<!-- 轮播图 -->
		<mix-swiper v-if="data.images" :albumPics="data.images"></mix-swiper>
		<view class="introduce b-b ">
			<!-- <text class="title">{{ data.name }}</text> -->
			<view class="game-title"  >
				<image class="game-title-bg" src="/static/ui1.0/game_title_bg.png" mode="widthFix"></image>
				<text class="title">{{ data.name }}</text>
			</view>
			<view class="c-list">
				<view class="row b-l">
					<text class="tit">钓场收费</text>
					<view class="con-list fill column">
						<text> {{ data.serviceFee }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">开赛时间</text>
					<view class="con-list fill column">
						<text> {{ data.startTime }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">结赛时间</text>
					<view class="con-list fill column">
						<text> {{ data.endTime||'' }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">比赛类型</text>
					<view class="con-list fill column">
						<text> {{ data.scoreType==1?"重量赛":"尾数赛" }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">比赛地点</text>
					<view class="con-list fill column">
						<text> {{ data.fishpondAddress }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">钓场名称</text>
					<view class="con-list fill column">
						<text> {{ data.fishpondName }} </text>
					</view>
				</view>
				<!-- <view class="row b-l">
					<text class="tit">回收价格</text>
					<view class="con-list fill column">
						<text> {{ data.cycleFishPrice?data.cycleFishPrice:0 }} </text>
					</view>
				</view> -->
				<view class="row b-l">
					<text class="tit">人数上限</text>
					<view class="con-list fill column">
						<text> {{ data.limitUp }} </text>
					</view>
				</view>
				<view class="row b-l">
					<text class="tit">联系电话</text>
					<view class="con-list fill column">
						<text> {{ data.phone }} </text>
					</view>
				</view>
			</view>
			<!-- <view class="price-wrap row">
				<mix-price-view :price="data.price" :size="40"></mix-price-view>
				<text v-if="data.market_price > data.price" class="m-price">￥{{ data.originalPrice }}</text>
				<text v-if="loaded && !data.freight_template" class="tag">免邮费</text>
			</view>
			<view class="bot row">
				<text class="fill">销量: {{ data.sale || 0 }}</text>
				<text class="fill">库存: {{ data.stock || 0 }}</text>
				<text class="fill">浏览量: {{ data.hot || 0 }}</text>
			</view> -->
		</view>
		<view id="award">
			<!-- <view class="introduce column " >
				<text class="title">实时奖励</text>
			</view>
			<view class="c-list" v-for="(item,index) in data.awarding" :key="index" >
				<view class="row b-l">
					<text class="tit">{{item.key}}</text>
					<view class="con-list fill column">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view>
			<view class="introduce column ">
				<text class="title">预估奖励</text>
			</view>
			<view class="c-list" v-for="(item,index) in data.awarded" :key="index" >
				<view class="row b-l">
					<text class="tit">{{item.key}}</text>
					<view class="con-list fill column">
						<text>{{item.value}}</text>
					</view>
				</view>
			</view> -->
			<view class="c-saizhi-title">
				<image class="c-saizhi-title-bg" src="/static/ui1.0/saizhi_bg.png" mode="widthFix"></image>
				<text class="title">赛制说明</text>
			</view>
			<view class="c-saizhi">
				<view class="row b-l">
					<view class="con-list fill column">
						<text> {{ data.description }} </text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作菜单 -->
		<bottom-operation @onOprationClick="onOprationClick"></bottom-operation>
		<!-- loading -->
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
	import pageHeader from './components/detail-page-header'//页面头
	import mixSwiper from './components/mix-swiper'//轮播图
	import bottomOperation from './components/bottom-operation'//底部栏
	
	let _anchorList = [];
	export default{
		components: {
			jyfParser,
			pageHeader,
			mixSwiper,
			bottomOperation,
		},
		data() {
			return {
				data: {},
				loaded: 1,
			};
		},
		onLoad(options){
			this.id = options.id;
		},
		onShow() {
			// console.log(">>onShow<<")
			this.loadData();
		},
		methods:{
			async loadData(){
				this.loadDetail();
			},
			//加载评价
			async loadDetail(){
				
				const res = await this.$request('MyGameDetail', 'GameDetail', {
					id: this.id
				})
				// console.log("==MyJoinGameDetail=="+JSON.stringify(res))
				const data = res.result;
				this.data = res.result;
			},
			//赛事结算
			async gameEdit(status){
				// console.log("==finish==")
				const res = await this.$post('MyPublishGame', 'GameEdit', {id: this.data.id,status: status});
				this.$util.msg(res.message);
				this.$util.msg("操作成功");
				setTimeout(()=>{
					uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
						delta: 1
					});
				}, 1000)
			},
			onOprationClick(type){
				console.log(type)
				if (type == 'success'){
					this.gameEdit(1)
				}else if(type == 'failed'){
					this.gameEdit(-2);
					// this.delay();
				}
			},
		},
	}
</script>

<style>
	page{
		background-color: #103167;
	}
</style>
<style scoped lang='scss'>
	.app{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		
		&:after{
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}
	/* 标题简介 */
	.introduce{
		background: #fff;
		margin: 10% 5% 15% 5%;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		.game-title {
			/* position: fixed; */
			position: relative;
			width: auto;
			height: auto;
			top: -80rpx;
			/* background-color: #66ffcc; */
			text-align:center;
			.game-title-bg{
				z-index: 1;
				position: relative;
				width: auto;
				margin-left: 10%;
				margin-right: 10%;
			}
			.title{
				position: relative;
				font-size: 38rpx;
				color: #FFFFFF;
				/* background-color: #39B54A; */
				z-index: 100;
				top: -120rpx;
			}
		}
		.title{
			min-height: 44rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
		}
		.price-wrap{
			min-height: 40rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
		}
		.m-price{
			margin-left: 10rpx;
			margin-right: 16rpx;
			color: #999;
			text-decoration: line-through;
		}
		.tag{
			transform: translateY(4rpx);
			padding: 0 10rpx;
			margin-left: 8rpx;
			background: $base-color;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			border-radius: 4rpx;
			position: relative;
			bottom: 8rpx;
		}
		.bot{
			padding: 28rpx 0 10rpx 4rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	/* 分享 */
	.share-wrap{
		background: linear-gradient(to right, #fdf5f6, #fbebf6);
		height: 76rpx;
		padding: 0 30rpx;
		color: $base-color;
		
		.icon{
			width: 90rpx;
			height: 30rpx;
			border: 1px solid $base-color;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;
			
			&:after{
				position:absolute;
				left: -20rpx;
				top: -12rpx;
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: $base-color;
			}
		}
		.icon-iconfontxingxing{
			position:relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
		}
		.tit{
			flex: 1;
			font-size: 26rpx;
			color: #666;
			margin-left:14rpx;
		}
		.icon-bangzhu1{
			padding: 10rpx;
			font-size: 30rpx;
			display: none;
		}
		.btn{
			padding-left: 20rpx;
			font-size: 24rpx;
			color: $base-color;
		}
		.icon-you{
			font-size: 22rpx;
			margin-left: 4rpx;
			color: $base-color;
		}
	}
	.c-saizhi-title{
		position: relative;
		width: auto;
		height: auto;
		top: -65rpx;
		/* background-color: #66ffcc; */
		text-align:center;
		z-index: 1;
		.title{
			font-size: 38rpx;
			color: #ffffff;
			font-weight: 700;
			position: relative;
			z-index: 1;
			top: -125rpx;
		}
		.c-saizhi-title-bg{
			z-index: 1;
			position: relative;
			width: auto;
			margin-left: 18%;
			margin-right: 18%;
		}
	}
	.c-saizhi{
		font-size: 26rpx;
		color: #888;
		background: #fff;
		/* background: #66ffff; */
		/* margin-top: -130rpx; */
		margin: 0% 5% 0% 5%;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-top: -180rpx;
		z-index: 2;
		position: relative;
		.row{
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position:relative;
			
			&:after{
				/* border-color: #eaeaea; */
				border-color: #20ffff;
			}
			&:last-child:after{
				border: 1;
			}
		}
		.location{
			width: 62rpx;
			height: 72rpx;
		}
		.con-list{
			color: #333;
			text{
				line-height: 40rpx;
			}
		}
		
	}
	.c-ranking-title{
		position: relative;
		width: auto;
		height: auto;
		top: -65rpx;
		text-align:center;
		z-index: 1;
		.title{
			font-size: 38rpx;
			color: #ffffff;
			font-weight: 700;
			position: relative;
			z-index: 1;
			top: -130rpx;
		}
		.c-ranking-title-bg{
			z-index: 1;
			position: relative;
			width: auto;
			margin-left: 13%;
			margin-right: 13%;
		}
	}
	.c-list{
		font-size: 26rpx;
		color: #888;
		background: #fff;
		margin-top: -130rpx;
		.row{
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position:relative;
			
			/* &:after{
				border-color: #eaeaea;
			} */
			&:last-child:after{
				border: 0;
			}
		}
		.tit{
			width: 140rpx;
		}
		.con{
			flex: 1;
			color: #333;
			
			.attr{
				margin-right: 10rpx;
			}
			.service{
				margin-right: 30rpx;
				
				&:last-child{
					margin: 0;
				}
			}
		}
		.con-list{
			color: #333;
			
			text{
				line-height: 40rpx;
			}
		}
		.red{
			color: $base-color;
		}
		.icon-you{
			font-size: 24rpx;
			color: #999;
		}
	}
	
	/*  详情 */
	.detail-desc{
		margin-top: 12rpx;
		background: #fff;
		
		.d-header{
			height: 80rpx;
			font-size: 30rpx;
			color: #333;
				
			text{
				margin: 0 20rpx;
			}
			&:before, &:after{
				content: '';
				width: 60rpx;
				border-bottom: 1px solid #ccc; 
			}
		}
	}
	
	
	/*参赛选手列表*/
	.hot-wrap{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		margin: 10% 5% 15% 5%;
		border-radius: 20rpx;
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	
</style>
